<template>
	<div class="login">
		<div class="loginMain">
			<div class="loginTit">
				<router-link to="/PreLogin">
					<img src="../assets/ar0.png" alt="">
				</router-link>
			
				<span>年少多金</span>
			</div>
			<div class="loginBody">
				<van-tabs v-model="active">
					<van-tab title="登录">
						
							<div class="loginBox">
								<img src="../assets/login_phone.png" alt="">
								<input type="text" name="=phone" v-model="phone" placeholder="请输入手机号码">
							</div>
							<div class="loginBox">
								<img src="../assets/logo_pwd.png" alt="">
								<input type="password" name="password" v-model="password" placeholder="请输入的密码">
							</div>
							<input class="loginLogin" value="登录" type="button" @click="login">
						
						<p class="loginForget">忘记密码</p>
					</van-tab>
					<van-tab title="注册">
						<div class="loginBox">
							<img src="../assets/login_phone.png" alt="">
							<input type="text" name="userName" v-model="phone1" placeholder="请输入手机号码">
						</div>
						<div class="loginBox">
							<img src="../assets/logo_pwd.png" alt="">
							<input type="password" name="userPsw" v-model="password1" placeholder="请输入的密码">
						</div>
						<input type="submit" value="注册" class="loginLogin" @click="register">
					</van-tab>

				</van-tabs>
			</div>


		</div>

		
	</div>
</template>

<script>
	// @ is an alias to /src


	export default {
		name: 'Login',
		components: {
		


		},
		data() {
			return {
				active: 2,
				phone:'',
				password:'',
				phone1:'',
				password1:''
				

			}

		},
		methods:{
			
			login(){
				this.axios.post('/login',{phone:this.phone,password:this.password}).then(res=>{
					if(res.data.status=='登录成功'){
						
						localStorage.setItem('user_id', res.data.user_id);
						this.$store.commit('set', res.data.user_id)
						this.$router.push({ path:'/MyInfo'  })
						  
					}else{
						alert(res.data.status)
					}
				})
			},
			register(){
				this.axios.post('/register',{phone:this.phone1, password: this.password1}).then(res=>{
					console.log(res);
					alert("注册成功");
					this.$router.push({ path:'/PreLogin'});
				})
			}
		}
	} 
</script>

<style>
	.loginMain {
		width: 100%;
		height: 260px;
		background-image: url(../assets/bg_logins.png);
	}

	.loginTit {
		width: 100%;
		height: 40px;
		line-height: 40px;
	}

	.loginTit img {
		height: 20px;
		width: 15px;
		float: left;
		margin-left: 15px;
		margin-top: 10px;

	}

	.loginTit span {
		font-size: 14px;
		color: white;
	}

	.loginBox {
		width: 80%;
		height: 50px;

		margin: 0 auto;
		margin-top: 15px;
		border-bottom: 1px solid gray;

	}

	.loginBox img {
		width: 20px;
		height: 30px;
		float: left;
		margin-top: 15px;
	}

	.loginBox input {

		height: 30px;
		float: left;
		margin-top: 15px;
		margin-left: 10px;
		border: none;
	}

	.loginBody {
		width: 80%;
		height: 340px;
		margin: 30px auto;
		background: white;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
		border-radius: 5px;
	}

	.loginLogin {
		width: 80%;
		height: 50px;
		margin: 20px auto;
		background: #ff3d40;
		border: none;
		border-radius: 5px;
		color: white;
	}

	.loginForget {
		float: left;
		margin-left: 30px;
		margin-top: 10px;
		font-size: 14px;
	}
</style>
